<script>
export default {
  name: "ta-avatar",
  render(clearElement) {
    let { hoverEdit, size, src, shape = 'circle' } = this.$props;
    let hoverEditElemen = null;
    let imaDom = null;

    let defaultSize = 60
    let divClass = ["ta-avatar","overall-relative"]
    let divStyle = {}
    if (size == defaultSize || size == defaultSize + 'px') {
      divClass.push("ta-avatar-default")
    } else {
      divStyle.width = size + 'px'
      divStyle.height = size + 'px'
    }
    if (shape == 'circle') {
      divClass.push("ta-circle")
    } else {
       divClass.push("ta-square")
    }

    if (src) {
      imaDom = clearElement("img", {
        attrs: {
          src: src,
        },
        class: ["avatar-img"],
      });
    } else {
      imaDom = null;
    }
    if (hoverEdit) {

      divClass.push("avatar-hover-show-edit")

      hoverEditElemen = clearElement(
        "div",
        {
          class: ["hover-edit", "overall-absolute", ...this.hoverEditClass],
          on: {
            click: (e) => {
              e.cancelBubble = true;
              e.stopPropagation();
              this.$emit("edit", e);
            },
          },
        },
        [
          clearElement("i", {
            class: "overall-icon icon-yunshangchuan_o hover-edit-icon",
          }),
        ]
      );
    }
    return clearElement(
      "div",
      {
        class: divClass,
        on: {
          click: (e) => {
            this.$emit("click", e);
          },
        },
        style: divStyle,
      },
      [imaDom, hoverEditElemen]
    );
  },
  computed: {
    hoverEditClass() {
      // 是否开启悬浮操作
      let hoverEdit = this.hoverEdit;
      // 悬浮样式  float 悬浮   popup 遮盖
      let editStyle = this.editStyle;
      // 样式集合
      let classArray = [];
      if (hoverEdit) {
        if (editStyle == "float") {
          classArray.push("hover-edit-float");
          let position = this.position;
          let positioClassArray = [
            "hover-edit-icon-top-left",
            "hover-edit-icon-top-right",
            "hover-edit-icon-bottom-left",
            "hover-edit-icon-bottom-right",
          ]; // 0上左  1上右   2下左  3下右
          let positionClass = positioClassArray[position];
          classArray.push(positionClass);
          return classArray;
        } else if (editStyle == "popup") {
          classArray.push("hover-edit-popup");
        }
        return classArray;
      } else {
        return classArray;
      }
    },
  },

  props: {
    size: {
      type: Number,
      default: 80,
    },
    src: {
      type: String,
      default: "",
    },
    hoverEdit: {
      type: Boolean,
      default: false,
    },
    editStyle: {
      type: String,
      default: "popup", // float 悬浮   popup遮盖
    },
    position: {
      type: Number, // 0上左  1上右   2下左  3下右
      default: 1,
    },
    shape: {
      type: String,
      default: "circle", // float 悬浮   popup遮盖
    },
  },
};
</script>

<style scoped>
.ta-avatar {
  display: inline-block;
  background: gray;
}
/* 圆形 */
.ta-circle {
  overflow: hidden;
  border-radius: 50%;
}
/* 方块 */
.ta-square {
  border-radius: 4px;
}
.ta-avatar-default{
  width: 60px;
  height: 60px;
}
.avatar-img {
  width: 100%;
  height: 100%;
}
.avatar-hover-show-edit:hover .hover-edit {
  opacity: 1;
}

.avatar-hover-show-edit:hover .hover-edit-popup {
  font-size: 25px;
}

.hover-edit {
  opacity: 0;
  border-radius: 50%;
  box-shadow: 0px 0px 13px #c3c3c3;
  z-index: 15;
  font-size: 18px;
}

.hover-edit-float {
  width: 25px;
  height: 25px;
  background: white;
  line-height: 25px;
  text-align: center;
  transition: 0.1s all linear;
}

.hover-edit-popup {
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: rgba(37, 29, 29, 0.61);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0px;
  transition: 300ms, 110ms font-size, opacity linear;
  /* cursor: help; */
}

.hover-edit-icon-top-left,
.hover-edit-icon-top-right {
  top: -5px;
}

.hover-edit-icon-bottom-right,
.hover-edit-icon-bottom-left {
  bottom: -5px;
}

.hover-edit-icon-top-left,
.hover-edit-icon-bottom-left {
  left: 0px;
}
.hover-edit-icon-top-right,
.hover-edit-icon-bottom-right {
  right: 0px;
}
</style>
